<template>
  <div class="article-comment">
    <!-- 全部评论 -->
    <van-sticky offset-top="11.73333vw">
      <div class="title van-hairline--bottom">
        <span>全部评论({{article.comm_count}})</span>
        <span>{{article.like_count}} 点赞</span>
      </div>
    </van-sticky>
    <!-- 评论列表 -->
    <div class="list">
        <van-list v-model="loading" :finished="finished" finished-text="没有评论了" @load="onLoad">
           <div class="item van-hairline--bottom" v-for="item in comments" :key="item.com_id">
          <van-image round width="10vw" height="10vw" :src="item.aut_photo"/>
          <div class="info">
            <p>
              <span class="name">{{item.aut_name}}</span>
              <span class="zan">{{item.like_count}}
                <zgticon class="boke-icon" :name="item.is_liking?'like-sel':'like2'" />
              </span>
            </p>
            <p class="cont">{{item.content}}</p>
            <p>
              <span class="reply" @click="clickReply(item)">{{item.reply_count}}回复 <i class="van-icon van-icon-arrow"></i></span>
              <span class="time">{{item.pubdate|timeFilter}}</span>
            </p>
          </div>
        </div>
        </van-list>
    </div>
    <!-- 底部工具 -->
     <!-- 底部工具 -->
    <div class="footer van-hairline--top">
      <div class="input" @click="showInput=true"><i class="van-icon van-icon-edit"></i></div>
      <div class="btn" @click="$emit('click-comment')">
        <zgticon class="boke-icon" name="comment"></zgticon><p>评论</p>
        <i v-if="article.comm_count">{{article.comm_count}}</i>
      </div>
      <div class="btn" @click="likeOrCancelArticle">
        <zgticon class="boke-icon" :name="article.attitude===1?'like-sel':'like'"></zgticon>
        <p>点赞</p>
      </div>
      <div class="btn" @click="collectOrCancelArtilce">
        <zgticon class="boke-icon" :name="article.is_collected?'collect-sel':'collect'"></zgticon>
        <p>收藏</p>
      </div>
      <div class="btn"><zgticon class="boke-icon" name="share"></zgticon><p>分享</p></div>
    </div>

    <!-- 二次评论页面 -->
     <!-- 回复弹层 -->
    <van-popup v-model="reply.open" position="right">
      <!-- 头 -->
      <van-nav-bar left-arrow @click-left="reply.open=false;reply.list=[]" :title="currentComment.reply_count+'条回复'" />
      <div class="reply-wrapper list">
          <van-list :immediate-check="false" v-model="reply.loading" :finished="reply.finished" finished-text="没有回复了" @load="loadReply">
                <!-- 列表 -->
                <!-- 列表 -->
          <div class="item van-hairline--bottom" v-for="item in reply.list" :key="item.com_id">
            <van-image round width="10vw" height="10vw" :src="item.aut_photo"/>
            <div class="info">
              <p>
                <span class="name">{{item.aut_name}}</span>
                <span class="zan">{{item.like_count}} <zgticon class="boke-icon" name="like2" /></span>
              </p>
              <p class="cont">{{item.content}}</p>
              <p><span class="time" style="margin-left:0">{{item.pubdate}}</span></p>
            </div>
          </div>
          </van-list>
      </div>
      <!-- 底 -->
      <div class="footer van-hairline--top" style="position:static">
        <div class="input big" @click="showInput=true"><i class="van-icon van-icon-edit"></i></div>
        <div class="btn">
          <zgticon name="collect"></zgticon><p>收藏</p>
        </div>
        <div class="btn"><zgticon name="share"></zgticon><p>分享</p></div>
      </div>
    </van-popup>
    <!-- 发布评论的弹出层 -->
    <van-popup v-model="showInput" position="bottom" @closed="currentComment={}">
      <van-nav-bar left-arrow @click-left="showInput=false" :title="currentComment.com_id?'回复评论':'评论文章'" right-text="发表" @click-right="publishComment" />
      <van-field
        v-model="text"
        rows="3"
        autosize
        type="textarea"
        maxlength="100"
        :placeholder="currentComment.com_id?`@${currentComment.aut_name}`:'请输入文章评论'"
        show-word-limit
      />
    </van-popup>
  </div>
</template>
<script>
import { getCommentsByArticle, likeArticle, collectArticle, commentOrReply, getReplysByComment } from '@/api/article.js'
export default {
  data () {
    return {
      text: '',
      offset: '',
      currentComment: {},
      showInput: false,
      loading: false,
      finished: false,
      comments: [],
      reply: {
        open: false,
        loading: false,
        finished: false,
        list: [],
        offset: ''
      }
    }
  },
  props: ['article'],
  created () {
    // 解决加载两次评论的bug
    this.loading = true
    this.onLoad()
  },
  methods: {
    // 收藏或取消收藏
    async collectOrCancelArtilce () {
      await collectArticle(this.article.art_id, !this.article.is_collected)
      this.$toast.success('操作成功')
      this.article.is_collected = !this.article.is_collected
    },
    // 点赞或者取消点赞功能
    async likeOrCancelArticle () {
    //   console.log('点赞或取消')
      // attitude === 1 代表点赞，其他代表未点赞
      var islike = 0
      if (this.article.attitude === -1) {
        islike = true
      } else if (this.article.attitude === 1) {
        islike = false
      }
      await likeArticle(this.article.art_id, islike)
      this.$toast.success('操作成功')
      islike ? this.article.attitude = 1 : this.article.attitude = -1
    },
    // 加载
    async onLoad () {
      console.log('加载评论')
      // 传文章id 获取文章的评论
      const data = await getCommentsByArticle(this.article.art_id, this.offset)
      //   console.log(data)
      console.log(this.article)
      // 1.判断是否是最后一页的数据
      if (data.end_id === data.last_id) {
        this.finished = true
      } else {
        // 将最后一个数据id当偏移量
        this.offset = data.last_id
      }
      // 2.追加数据
      this.comments = [...this.comments, ...data.results]
      // 3.取消加载中
      this.loading = false
    },
    // 加载评论
    async loadReply () {
      const data = await getReplysByComment(this.currentComment.com_id, this.reply.offset)
      this.reply.list.push(...data.results)
      if (data.end_id === data.last_id) {
        this.reply.finished = true
      } else {
        this.reply.offset = data.last_id
      }
      this.reply.loading = false
    },
    // 点击评论里面的回复
    clickReply (item) {
      console.log(item)
      this.reply.open = true
      this.reply.finished = false
      this.currentComment = item
      this.reply.offset = ''
      this.reply.loading = true
      this.reply.list = []
      this.loadReply()
    },
    // 发布评论
    async publishComment () {
    //   console.log(this.currentComment)
      if (this.currentComment.com_id) {
        // 回复评论
        if (!this.text.trim()) return this.$toast.info('请输入评论内容')
        const data = await commentOrReply(this.currentComment.com_id, this.text, this.article.art_id)
        this.reply.list.unshift(data.new_obj)
        this.currentComment.reply_count++
        this.showInput = false
        this.text = ''
        this.$toast.success('回复成功')
      } else {
        if (!this.text.trim()) return this.$toast.info('请输入评论内容')
        const data = await commentOrReply(this.article.art_id, this.text)
        // console.log(data)
        // 存储发表的内容
        this.comments.unshift(data.new_obj)
        this.article.comm_count++
        this.showInput = false
        this.text = ''
        this.$toast.success('评论成功')
      }
    }
  }
}

</script>
<style scoped lang="less">
.article-comment {
  .title {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    background: #fff;
    span {
      font-size: 32px;
      &:last-child {
        color: #ccc;
        font-size: 28px;
      }
    }
  }
  .list {
    padding: 0 32px;
    .item {
      display: flex;
      padding: 20px 0;
      .info {
        padding-left: 20px;
        flex: 1;
        p {
          margin: 0;
          .name {
            font-size: 32px;
          }
          .zan {
            font-size: 28px;
            float: right;
            color: #999;
            .boke-icon {
              font-size: 24px;
              position: relative;
              top: -1px;
            }
          }
          &.cont {
            font-size: 28px;
            color: #666;
            padding: 20px 0;
            word-break: break-all;
            padding-right: 80px;
          }
          .reply {
            min-width: 120px;
            height: 48px;
            text-align: center;
            line-height: 56px;
            font-size: 24px;
            background: @boke-gray-color;
            display: inline-block;
            border-radius: 28px;
            color: #666;
            .van-icon {
              position: relative;
              top: 1px;
            }
          }
          .time {
            font-size: 24px;
            color: #999;
            margin-left: 20px;
          }
        }
      }
    }
  }
}
 .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    background: #fff;
    display: flex;
    width: 100%;
    align-items: center;
    .input {
        &.big {
            width: 520px;
        }
      margin-left: 20px;
      width: 400px;
      height: 68px;
      background: @boke-gray-color;
      border-radius: 34px;
      line-height: 72px;
      padding-left: 20px;
      .van-icon {
        color: #999;
      }
    }
    .btn {
      flex: 1;
      text-align: center;
      position: relative;
      p {
        margin: 0;
        font-size: 20px;
      }
      .boke-icon {
        font-size: 36px;
      }
      i {
        height: 32px;
        min-width: 32px;
        padding: 0 6px;
        background: @boke-color;
        color: #fff;
        font-size: 20px;
        position: absolute;
        right: 0;
        top: -8px;
        line-height: 32px;
        border-radius: 16px;
        font-style: normal;
      }
    }
  }
  // 最下面加如下样式
.van-popup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.reply-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
::v-deep .van-nav-bar__text {
  color: @boke-color;
}
::v-deep .van-field__control {
  background: @boke-gray-color;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 4px;
}
</style>
